<template>
  <el-container>
    <!-- 顶栏容器 -->
    <el-header style="background: rgb(244,244,245);">
      <el-row>
        <el-col :span="2" :offset="1">
            <img style="width:32px;height:57px" src="http://img601.yun300.cn/repository/image/fa5648aa-7f94-41fd-9457-a657bc8fcbb1.jpg?tenantId=215997&viewType=1&k=1642041118000">
        </el-col>
        <el-col :span="13" :offset="3">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="rgb(244,244,245)">
            <el-menu-item index="1" @click.native="redirect('/')">首页</el-menu-item>
            <el-menu-item index="2" @click.native="redirect('/goods')">网上超市</el-menu-item>
            <el-menu-item index="3" @click.native="redirect('/service')">本地服务</el-menu-item>
            <!-- <el-menu-item index="4" @click.native="redirect('/message')">消息中心</el-menu-item> -->
            <el-menu-item index="4" @click.native="redirect('/information')">社区资讯</el-menu-item>
            <el-submenu index="5">
              <template slot="title">便民服务</template>
              <el-menu-item index="5-1" @click.native="redirect('/news')">社区朋友圈</el-menu-item>
              <el-menu-item index="5-2" @click.native="redirect('/activity')">投诉通道</el-menu-item>
              <el-menu-item index="5-3" @click.native="redirect('/Convenience_payment')">便民缴费</el-menu-item>
              <el-menu-item index="5-4" @click.native="redirect('/Park')">智慧停车</el-menu-item>
            </el-submenu>

            <el-menu-item index="6" @click.native="redirect('/epidemic')">疫情服务</el-menu-item>
            <el-menu-item index="7">社区互动</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="4"  style="margin-top:9px">
          <!-- 用户不在线显示登录和注册 -->
          <span v-if="!online()">
            <el-button type="primary" @click="redirect('/login')" round>登录</el-button>
            <el-button type="info" @click="redirect('/regist')" round>注册</el-button>
          </span>
          <!-- 用户在线显示个人中心和登出 -->
          <span v-else>
            <el-button type="primary" @click="redirect('/account')" round>
              <el-dropdown>
                <span class="el-dropdown-link" style="color:white">
                  个人中心
                </span>
                <el-dropdown-menu slot="dropdown" placement="top">
                  <el-dropdown-item>
                    <router-link to="ShoppingBag" style="text-decoration: none;">
                    <div class="el-icon-s-goods">
                        购物袋
                      </div>
                    </router-link>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>


            </el-button>
            <el-button type="info" @click="redirect('/logout')" round>登出</el-button>
          </span>

        </el-col>
      </el-row>
    </el-header>

    <el-main>
      <!-- <el-row>
        <el-col :span="20" :offset="2"> -->
          <!-- 展示路由页面 -->
          <router-view/>
        <!-- </el-col>
      </el-row> -->
    </el-main>

    <!-- 底栏容器 -->
    <el-footer height="30px" style="color:rgb(153,153,153);font-size:12px;padding-top:6px;text-align:center;background:rgb(246,246,246);">
      汤臣一品便民服务中心
    </el-footer>
  </el-container>
</template>

<script>
  export default{
    data (){
      return {
        /* 菜单选择项，默认为1 */
        activeIndex: "1",
      }
    },
    methods: {
      /* 根据本地是否保存有token判断用户是否在线 */
      online:function(){
        // console.log(window.sessionStorage.user.token)
        if(window.sessionStorage.getItem('token')){
          return true;
        }else{
          return false;
        }
      },
      /* 本跳转页面的统一方法 */
      redirect: function(view){
        this.$router.push(view)
      }
    },
    watch: {
	    //监听路由地址的改变，让刷新页面后，也能选择正确的菜单项
	    $route:{
        immediate: true,
        handler(newVal){
          if(newVal.path == "/"){
            this.activeIndex = "1"
          }else if(newVal.path == "/goods"){
            this.activeIndex = "2"
          }else if(newVal.path == "/service"){
            this.activeIndex = "3"
          }else if(newVal.path == "/news"){
            this.activeIndex = "5-1"
          }else if(newVal.path == "/activity"){
            this.activeIndex = "5-2"
          }else{
            // 其余路径不选中菜单
            this.activeIndex = "0"
          }
        }
	    }
	  }
  }
</script>

<style scoped>
  .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      /* line-height: 160px; */
    }
</style>
